<?php
/**
 * The template for displaying archive pages
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header("loopart"); ?>

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/loopart.css" />
<script src="<?php echo get_template_directory_uri(); ?>/js/loopart.js"></script>

<div class="wrap body body2">

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
		

		<?php
			/* Start the Loop */
			$count = 0;
			$len1 = 21;
			$len2 = 14;
			$count1 = 0;
			$count2 = 0;
			$data1 = array();
			$data2 = array();
			while ( have_posts() ) : the_post();
				$count = $count + 1;
			endwhile;

			$count1 = round($count / 2);
			$count2 = $count - $count1;
			$index = 0;

			$tag = get_query_var( 'tag' );
		?>

		<?php
		rewind_posts();
		while ( have_posts() ) : the_post();

			/*
			 * Include the Post-Format-specific template for the content.
			 * If you want to override this in a child theme, then include a file
			 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
			 */
			if ($index < $count1) {
				$pos = mt_rand(0, 21);
				$data1[$pos] = $post;
			} else {
				$pos = mt_rand(0,14);
				$data2[$pos] = $post;
			}
			$index = $index + 1;
 
		endwhile;
		?>

		<div class="body">
			<div class="left">
				<ul>
					<li class="<?php if($tag=='全部' || $tag=='') echo 'active' ?> "><a href='/category/loopart'>全部</a></li>
					<li class="<?php if($tag=='2018') echo 'active' ?> "><a href='?tag=2018'>2018</a></li>
					<li class="<?php if($tag=='2017') echo 'active' ?> "><a href='?tag=2017'>2017</a></li>
				</ul>
			</div>
			<div class="right">
				<ul class="top">
					<?php
						for ($i = 0; $i < $len1; $i++) {
							$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($data1[$i]->ID), 'large');
							$link = esc_url( get_permalink($data1[$i]->ID)) ;
							if (isset($data1[$i])) {
								echo '<li class="active"><a href="'.$link.'"><img src="'.$large_image_url[0].'"></a></li>';
							} else {
								echo '<li></li>';
							}
						}
					?>
				</ul>
				<ul class="bottom">
					<?php
						for ($i = 0; $i < $len2; $i++) {
							$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($data2[$i]->ID), 'large');
							$link = esc_url( get_permalink($data2[$i]->ID)) ;
							if (isset($data2[$i])) {
								echo '<li class="active"><a href="'.$link.'"><img src="'.$large_image_url[0].'"></a></li>';
							} else {
								echo '<li></li>';
							}
						}
					?>
				</ul>
			</div>
		</div>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();
